<template>
  <div>
    <table
      border="1"
      width="700"
      style="border-collapse: collapse"
    >
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="checkAll"/> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <Row
        v-for="(item, index) in goodList" 
        :key="index"
        :obj="item"
        :index="index"
        >
        </Row>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">
            {{ isAll }}
          </td>
        </tr>
      </tfoot>
    </table>
    <div>
      商品名称：<input type="text" v-model="good.name">
      商品价格：<input type="text" v-model.number="good.price">
      商品数量：<input type="text" v-model.number="good.num">
      <button @click="addGoodFn">添加</button>
    </div>
  </div>
</template>

<script>
import Row from './components/Row.vue'
import _ from 'lodash'
import { mapGetters, mapMutations, mapState } from 'vuex';
export default {
  components: {
    Row
  },
  data() {
    return {
      good:{
        name: '',
        price: 0,
        num: 0,
        checked: false,
      }
    };
  },
  computed: {
    ...mapState(["goodList"]),
    ...mapGetters(["isAll"]),
    checkAll: {
      set(val) {
        return this.goodList.forEach(item => item.checked = val)
      },
      get() {
        return this.goodList.every(item => item.checked)
      }
    }
  },
  methods: {
    ...mapMutations(["ADD_GOOD"]),
    addGoodFn() {
      const obj = _.cloneDeep(this.good)
      this.ADD_GOOD(obj)
      this.good.name = '',
      this.good.price = 0
      this.good.num = 0
    },

  }
};
</script>

<style scoped>

</style>